import React, {Component} from "react";
import {Card, Form, Modal} from "antd";
import PropTypes from "prop-types";
import {EditFormNormal, SearchForm, TableContent} from "../../../widgets/index";
import {getOrganNo, HTTP} from "../../../utils";
import {formatDate} from "../../../utils/Libs";
import {storageRecordDetailList, storageRecordDownload, storageRecordList} from "../../../utils/api";
import BreadcrumbCustom from "../../../components/BreadcrumbCustom";
const FormItem = Form.Item;

class ViewDetailBtn extends Component {
    static propTypes = {
        record: PropTypes.any
    }
    constructor(props) {
        super(props)
        this.state = {
            detailvisible: false
        }
        this.tableref = null
    }
    columns = [{
        title: '产品名称',
        dataIndex: 'erCodeName',
        key: 'erCodeName'
    }, {
        title: '产品规格',
        dataIndex: 'erCodeSpec',
        key: 'erCodeSpec'
    }, {
        title: '批号',
        dataIndex: 'erBatchData',
        key: 'erBatchData'
    }, {
        title: '箱号',
        dataIndex: 'erMaterialBox',
        key: 'erMaterialBox'
    }]
    render() {
        const { record } = this.props
        console.log(record)
        return (
            <span>
                <a onClick={this.invokeView}>查看</a>
                <span className="ant-divider" />
                <a onClick={this.invokeDownload}>下载</a>
                <Modal
                    maskClosable={false}
                    visible={this.state.detailvisible}
                    onCancel={this.onClose}
                    footer={null}
                >
                    <TableContent
                        ref={e => this.tableref= e}
                        columns={this.columns}
                        noLoad={true}
                        searchParam={{
                            batchNo: this.props.record.batchNo,
                            operatorId: this.props.record.operatorId,
                            dealerOrganNo: this.props.record.dealerOrganNo,
                            producerOrganNo: this.props.record.producerOrganNo
                        }}
                        url = {storageRecordDetailList}
                    />
                </Modal>
            </span>
        )
    }
    onClose = () => {
        this.setState({
            detailvisible: false
        })
    }

    invokeView = () => {
        this.setState({
            detailvisible: true
        },() => {
            this.tableref.loadData()
        })
    }

    invokeDownload = (v) => {
        const { record } = this.props;
        const fileName = "销售记录" + "_" + record['formattedActionTime'] +  "_" + record['batchNo'] +  ".xlsx"
        const params = {id: record.id, recordType: record.recordType, dealerOrganNo: record.dealerOrganNo}
        console.log('record ', record)
        HTTP.postFile(storageRecordDownload, params, fileName)
    }
}

export default class extends Component {

    static contextTypes = {
        router: PropTypes.object
    }

    constructor(props) {
        super(props);
        this.table = undefined
        this.state = {
            searchParam: {
                dealerOrganNo: getOrganNo(),
                recordType: 2
            },
            formVisible: false,
            formReadOnly: false,
            formInitData: {}
        }
    }

    seaFields = [{
        label: '日期',
        key: 'actionRangeTime',
        type: 'rangedatepicker'
    }]

    seaBtns = [{
        label: '下载',
        onClick: (value) => this.invokeDownload(value)
    }]

    columns = [{
        title: '时间',
        dataIndex: 'actionTime',
        key: 'actionTime',
        render: (d) => formatDate(d)
    }, {
        title: '厂方',
        dataIndex: 'producerName',
        key: 'producerName'
    }, {
        title: '仓库名称',
        dataIndex: 'storageName',
        key: 'storageName',
    }, {
        title: '客户',
        dataIndex: 'linkCustomer',
        key: 'linkCustomer'
    }, {
        title: '动作',
        dataIndex: 'recordTypeName',
        key: 'recordTypeName'
    }, {
        title: '查看明细',
        key: 'viewDetail',
        render: (text, record) => {
            return (
                <ViewDetailBtn record={record}/>
            )
        }
    }]


    render() {
        return (
            <div>
                <BreadcrumbCustom first="库存管理" second="出库记录" />
                <Card title="出库记录" bordered={false}>
                    <SearchForm fields={this.seaFields} btns={this.seaBtns} onSearch={this.onSearch}/>
                    <TableContent
                        ref={(e) => {this.table = e}}
                        columns={this.columns}
                        url = {storageRecordList}
                        searchParam={this.state.searchParam}
                    />
                </Card>
                {
                    this.state.formVisible && (
                        <EditFormNormal
                            initData={this.state.formInitData}
                            fields={this.editFields}
                            onClose={() => this.hideForm()}
                            readOnly={this.state.formReadOnly}
                            onSave={this.invokeFormSubmit.bind(this)}
                        />
                    )
                }
            </div>
        )
    }


    onSearch = (values) => {
        if(values['actionRangeTime'] !== undefined && values['actionRangeTime'] !== "") {
            values['actionStartTime'] = values['actionRangeTime'][0].format("YYYY-MM-DD")
            values['actionEndTime'] = values['actionRangeTime'][1].format("YYYY-MM-DD")
        }
        this.setState({
            searchParam: Object.assign({}, this.state.searchParam, values)
        }, () => {
            this.table.loadData()
        })
    }

    invokeAdd = () => {
        this.setState({
            formReadOnly: false
        }, () => {
            this.showForm()
        })
    }

    invokeDownload = () => {
        const values = this.state.searchParam
        if(values['actionRangeTime'] == undefined || values['actionRangeTime'] == "") {
            Modal.warning({
                title: '提示',
                content: '日期区间需选择'
            })
            return false
        } else {
            const fileName = "销售记录" + values['actionStartTime'] + "-" + values['actionEndTime'] + ".xls"
            HTTP.postFile(storageRecordDownload, this.state.searchParam, fileName)
        }
    }

    invokeView = (record) => {
        console.log('record', record)
        this.setState({
            formReadOnly: true
        }, () => {
            this.showForm(record)
        })
    }

    showForm = (d) => {
        this.setState({
            formVisible: true,
            formInitData: d || {}
        })
    }

    hideForm = () => {
        this.setState({
            formVisible: false,
            formInitData: {}
        })
    }

    invokeFormSubmit(params) {
    }

    hideFormSuccess = () => {
        this.setState({
            formVisible: false,
            formInitData: {}
        }, () => {
            this.table.loadData()
        })
    }
}
